<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>教师后台-不学也通</title>

    <link rel="shortcut icon" href="../微信图片_20230412135936.jpg" type="image/x-icon">

    <style>
        .container {

            min-height: 100vh;

        }



        .container .nav {

            height: 100%;

            background-color: #fff;

        }



        .link-secondary {

            text-decoration: none;

        }



        .link-secondary:hover {

            color: #0d6efd !important;

        }
    </style>

</head>



<body>

    <!-- container是bootstrap的居中窄的显示方案 -->

    <div class="container bg-body-secondary">

        <div class="row">

            <div class="col-md-2 leftmenu" id="leftmenu">



            </div>

            <div class="col-md-9 col-xs-12 kc ms-3">

                <div class="row mt-3 pd-3 border-bottom border-secondary">

                    <div class="col-md-2">班级列表</div>

                    <div class="col-md-1 offset-md-8">

                        <a class="nav-link link-success" href="./createcourse.html4">

                            <i class="bi bi-people-fill"></i>

                            添加班级

                        </a>

                    </div>

                </div>

                <!--添加学生-->

                <div class="row mt-3">

                    <div class="col-md-3 col-sm-12">

                        <input type="text" class="form-control" placeholder="手机号/学号">

                        <i class="bi bi-search" style="position: absolute" style="right: 20px; top: 10px;"></i>



                    </div>

                    <div class="col-md-2 offset-md-7 col-xs-6 offsset-xs-6">

                        <button class="btn btn-success" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">添加学生</button>

                    </div>

                </div>

                <div class="row mt-3">

                    <table class="table table-bordered">

                        <thead>

                            <tr>

                                <th>序号</th>

                                <th>学号</th>

                                <th>姓名</th>

                                <th>系部</th>

                                <th>班级</th>

                                <th>教学团队</th>

                                <th>创建时间</th>

                                <th>操作</th>

                            </tr>

                        </thead>

                        <tbody id="tbody">

                            <!-- <tr>

                <td>1</td>

                <td>221142601002</td>

                <td>程号前</td>

                <td>计算机科学与应用</td>

                <td>22级移动应用开发</td>

                <td>移动应用开发</td>

                <td>2022-09-10</td>

                <td>

                  <button class="btn btn-primary btn-sm">编辑</button>

                  <button class="btn btn-danger btn-sm">删除</button>

                </td>

              </tr> -->

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

    <!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <di v class="modal-header">

                    <h1 class="modal-title fs-5 text-success" id="exampleModalLabel">添加学生</h1>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <form id="studentForm">

                    <!--手机号-->

                    <div class="mb-3">

                        <label for="tel" class="form-label">手机：</label>

                        <input name="tel" type="tel" required class="form-control" id="tel" aria-describedby="tel"
                            placeholder="请输入手机号">

                    </div>

                    <!--学号-->

                    <div class="mb-3">

                        <label for="sno" class="form-label">学号：</label>

                        <input name="sno" type="number" required class="form-control" id="sno" aria-describedby="tel"
                            placeholder="请输入学号">

                    </div>

                    <!--姓名-->

                    <div class="mb-3">

                        <label for="name" class="form-label">姓名：</label>

                        <input name="name" type="text" required class="form-control" id="name" aria-describedby="tel"
                            placeholder="请输入姓名">

                    </div>

                    <!--请输入院系 选择专业 都留在添加班级中实现-->

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn text-white bg-danger" data-bs-dismiss="modal">取消</button>

                <button id="submit" type="button" class="btn btn-success">添加</button>

            </div>

        </div>

    </div>

    </div>

    <script type="module" src="../js/main.js"></script>

    <script src="../js/jquery.min.js"></script>

    <script src="../js/common.js"></script>

    <script>

        $(document).ready(function () {

            $("#submit").click(function () {

                // 获取提交数据

                // 方式1 全部获取

                // $("studentForm").serializeArray() 获取dorm表单中所有要提交的信息

                // 方式2 一个一个获取

                let name = $("#name").val()

                let tel = $("#tel").val()

                let sno = $("#sno").val()

                i = $("#tel").val();

                i = i + 1;

                $("#tel").val(i);

                console.log($("#studentForm"))

                //提交学生信息到后端

                $.post("https://unicloud.codecore.cn/ms/studentCreate", {

                    student_name: escape(name),//后端有问题 先将汉字转换成 机器码

                    tel: tel,

                    sno: sno

                }, function (res) {

                    console.log(res);

                    if (res.errCode == 0) {

                        //提示添加成功

                    } else {

                        //提示添加失败

                    }

                })

            })

            //进入页面直接获取学生所有信息（后期添加获取班级下的学生信息）

            $.get("http://unicloud.codecore.cn/ms/studentAll", {}, function (res) {

                //1.获取到该班级所有的学生信息 后端返回的是一个数组 res

                for (let i = 0; i < res.length; i++) {

                    //3. 循环该数组 将数组中元素拼接到下面字符串对应位置

                    const elem = res[i];

                    console.log(elem);

                    /**
          
                     * 4. 使用es6 ${}字符串拼接
          
                     * 后端没有传递信号 有前端for循环的i充当
          
                     * 时间需要我们手动转化一下格式
          
                     */

                    $("#tbody").append($(`<tr>

<td>${i + 1}</td>

<td>${elem.sno}</td>

<td>${elem.name}</td>

 <td>${elem.department_name}</td>

 <td>${elem.class_name}</td>

<td>${elem.major_name}</td>

 <td>${elem.create_time}</td>

<td><button class="btn btn-success btn-sm"data-id="${elem._id}">编辑</button>

 <button class="btn btn-danger" data-id="${elem._id}">删除</button>

</td>

</tr>`))

                }

            })

            //当点击按钮触发

            $("#tbody").delegate("button.btn-danger", "click", function () {

                // $(this).data()获取点击元素上data属性中存放的数据

                let data = $(this).data();//data数据格式是{id：“字符串”}比较-后端要求 可以直接传递

                $.post("https://unicloud.codecore.cn/ms/studentRemove", data, function (params) {

                    console.log(params);



                })

            });

            //当点击时调转到编辑页面

            $("#tbody").delegate("button.btn-success", "click", function () {

                let data = $(this).data();

                //跳转到新页面 并将要编辑的数据的id编号带过去

                location.href = `./edit_student.html?id=${data.id}`

            });

        })

    </script>

</body>



</html>